<template>
	<view>
		<!-- <u-navbar ref="navbar" title="" leftIcon=""></u-navbar> -->
		<u-navbar ref="navbar" :leftIcon="null" bgColor="#ff820d" placeholder></u-navbar>
		<view class="new_top">
			<view class="head_box px-40 flex-item-c">
				<u-avatar :src="userInfo.avatar" size="100rpx"></u-avatar>
				<view class="ml-20" v-if="token">
					<view class="font-34 color-f">{{userInfo.nickname}}</view>
					<view class="color-f font-26 mt-15">{{userInfo.mobile}}</view>
				</view>

				<view v-else class="ml-20 font-26 color-f">
					<text>您还没有登录，</text>
					<text style="text-decoration: underline;" @click="goLogin">去登录</text>
				</view>
			</view>
			<view class="card-money">
				<view class="money" @click="walletClick">
					<text class="value">{{token&&userInfo.money?userInfo.money:'0.00'}}</text>
					<text class="label">钱包余额</text>
				</view>
				<!-- <view class="money" @click="bankClick">
					<text class="value">{{token?count_bank:0}}<text
							style="font-weight: 400;font-size:26rpx ;">张</text></text>
					<text class="label">银行卡</text>
				</view> -->
			</view>
		</view>
		<view class="new_bottom">
			<view class="top_box mx-30 flex-sb">
				<view class="" v-for="(item, index_top) in topList" :key="index_top" @click="toOrders(item)">
					<view class="flex-c">
						<u-image :src="item.image" :width="item.icon_width" :height="item.icon_height"></u-image>
					</view>
					<view class="color-3 font-24 mt-20">{{item.name}}</view>
				</view>
			</view>
			<view class="maijia mx-30" @click="goSale">
				<view class="font-32 font-bold title">我是卖家</view>
				<view class="fabu-box">
					<view class="fabu-btn">发布网店</view>
					<view class="mt-15 font-24">立即享受最专业的顾问服务</view>
				</view>
			</view>
			<view class="center_box mx-30" style="transform: translateY(-40%)">
				<view class="center_box_lis" v-for="(item, index_two) in twoList" :key="index_two"
					@click="toDetails(index_two)">
					<view class="list_box_left flex-item-c">
						<view class="flex-c" style="min-width: 50rpx;">
							<u-image :src="item.image" width="50rpx" height="50rpx">
							</u-image>
						</view>
						<view :class="['color-3','mt-15',item.name.length>4?'font-22':'font-28']">{{item.name}}
						</view>
					</view>
				</view>
				<view class="center_box_lis" @tap="goSetting">
					<view class="list_box_left flex-item-c">
						<view class="flex-c" style="min-width: 50rpx;">
							<u-image src="http://image.xjsdd.com/upload/20230711/2be569cc165c64e22ad68629bcfd0e5d.png"
								width="50rpx" height="50rpx">
							</u-image>
						</view>
						<view class="color-3 mt-15 font-28">更多设置</view>
					</view>
				</view>
			</view>
		</view>
		<u-gap height="30rpx"></u-gap>

		<u-toast ref="uToast"></u-toast>
		<toLogin ref="toLogin"></toLogin>
		<!-- <u-modal :show="modalShow" width="600rpx" showCancelButton title="提醒" @confirm="logout"
			@cancel="modalShow = false">
			<view slot="default" class="text-c">确定退出登录吗？</view>
		</u-modal> -->

		<u-no-network></u-no-network>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'
	import {
		getUser
	} from '@/config/api.js'
	export default {
		data() {
			return {

				topList: [{
						image: 'http://image.xjsdd.com/upload/20230711/27ed94e510c210f4ac0a998027283d67.png',
						name: '我的订单',
						icon_width: '50rpx',
						icon_height: '50rpx',
						value: 0
					}, {

						image: 'http://image.xjsdd.com/upload/20230711/21b3ce410f3626afeece8cc35f77685a.png',
						// image: '../../static/icon/topList_one.png',
						name: '已预订',
						icon_width: '50rpx',
						icon_height: '50rpx',
						value: 1
					},
					{
						image: 'http://image.xjsdd.com/upload/20230711/f1208a7fd1dad6610581f5b0a12ae77a.png',
						name: '交接中',

						icon_width: '50rpx',
						icon_height: '50rpx',
						value: 2
					},
					{
						image: 'http://image.xjsdd.com/upload/20230711/8693798de1b033f6fb8b4e9630d1f53b.png',
						name: '已完成',
						icon_width: '50rpx',
						icon_height: '50rpx',
						value: 3
					},


				],
				twoList: [{
						image: 'http://image.xjsdd.com/upload/20230711/8cf389c6be7b107a44505656bd8f48a4.png',
						name: '实名认证',

						icon_width: '40rpx',
						icon_height: '33rpx'
					},
					{
						image: '/static/imgs/address.png',
						name: '收货地址',

						icon_width: '40rpx',
						icon_height: '33rpx'
					},
					// {
					// 	image: 'http://image.xjsdd.com/upload/20230711/2c76e2c92f9c7472449b7863cd6afae5.png',
					// 	name: '意见反馈',
					// 	path: 'personal/feedback',
					// 	item: {
					// 		type: 2
					// 	},
					// 	icon_width: '40rpx',
					// 	icon_height: '30rpx'
					// },
					{
						image: 'http://image.xjsdd.com/upload/20230711/bfc67a4471a00c489cc5b4ed22076928.png',
						name: '联系我们',

						icon_width: '46rpx',
						icon_height: '46rpx'
					}
				],
			};
		},
		onShow() {
			if (this.token) {
				this.getUserInfo()
			}

		},
		computed: {
			...mapState(['userInfo', 'token']),

		},
		methods: {
			...mapMutations(['saveUserInfo', 'saveToken']),
			async getUserInfo() {
				const res = await getUser()
				if (res.code == 1) {
					this.saveUserInfo(res.data.userinfo)
					this.saveToken(res.data.userinfo.token)
				}
			},
			walletClick() {
				uni.navigateTo({
					url: `/pages/my/wallet`
				})
			},
			goSale() {
				uni.switchTab({
					url: '/pages/sale/sale'
				})
			},
			goLogin() {
				uni.navigateTo({
					url: '/pages/my/login'
				})
			},
			toOrders(item) {
				if (!this.token) {
					uni.showToast({
						icon: 'none',
						title: '请先登录'
					})
					return
				}
				uni.navigateTo({
					url: './myOrders?type=' + item.value
				})
			},
			toDetails(index) {
				switch (index) {
					case 0:
						if (!this.token) {
							uni.showToast({
								icon: 'none',
								title: '请先登录'
							})
							return
						}
						uni.navigateTo({
							url: '/pages/my/realName'
						})
						break;
					case 1:
						if (!this.token) {
							uni.showToast({
								icon: 'none',
								title: '请先登录'
							})
							return
						}
						uni.navigateTo({
							url: '/pages/my/addressList'
						})
						break;
					default:
						uni.makePhoneCall({
							phoneNumber: '12345'
						})
						break;
				}
			},
			goSetting() {
				if (!this.token) return uni.showToast({
					icon: 'none',
					title: '请先登录'
				})
				uni.navigateTo({
					url: './setting'
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #f5f6f8;
	}
</style>
<style lang="scss" scoped>
	.new_top {
		height: 450rpx;
		background-color: #ff820d;

		.card-money {
			display: flex;
			justify-content: center;
			color: #fff;

			.money {
				width: 50%;
				margin-top: 80rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.value {
					margin-bottom: 20rpx;
					font-size: 48rpx;
					font-weight: 500;
				}

				.label {
					font-size: 28rpx;
				}

			}
		}
	}

	.new_bottom {
		width: 100%;
		box-sizing: border-box;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		background-color: #f5f6f8;
		margin-top: -50rpx;
		// overflow: hidden;
	}

	.top_box {
		// margin-top: -100rpx;
		background: #fff;
		border-radius: 10rpx;
		padding: 45rpx 50rpx 30rpx;
		transform: translateY(-40%);

	}

	.center_box_p {
		transform: translateY(-70rpx);

	}

	.option_box,
	.center_box {
		background: #fff;
		border-radius: 10rpx;
		// margin-top: 30rpx;
		padding: 30rpx;
		padding-bottom: 0;
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.center_box_lis {
			width: 25%;
			margin-bottom: 48rpx;

			.list_box_left {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
		}

		.center_box_lis_two {
			padding: 0;
			margin-bottom: 48rpx;


		}
	}

	.maijia {
		background-color: #fff;
		border-radius: 20rpx;
		margin: 60rpx 30rpx 30rpx;
		padding: 30rpx;
		transform: translateY(-40%);
		overflow: hidden;
		box-sizing: border-box;

		.title {}

		.fabu-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			margin-top: 30rpx;

			.fabu-btn {
				height: 60rpx;
				width: 180rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 30rpx;
				border: 1px solid #ff820d;
				color: #ff820d;
				font-size: 28rpx;
			}
		}
	}
</style>